<template>
    <div class="callback-bind">
        <div class="user-info">
            <img :src="avatar" alt=""/>
            <p>Hi，{{nickname}} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
        </div>
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="mobile">
                <el-input v-model="form.mobile" prefix-icon="icon iconfont icon-phone" placeholder="绑定的手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="form.code" prefix-icon="icon iconfont icon-code" placeholder="短信验证码">
                    <el-button slot="append" @click="send">{{time===0?'发送验证码':`${time}秒后发送`}}</el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <a href="javascript:;" class="submit" @click="userQQBindLogin">立即绑定</a>
    </div>
</template>

<script>
    import QC from "qc";
    import {userQQBindCode, userQQBindLogin} from "@/api/user";
    import {useIntervalFn} from "@vueuse/shared";

    export default {
        name: "CallbackBind",
        props: {
            unionId: {
                type: String,
                default: ''
            }
        },
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确'));
                }
                callback();
            };

            return {
                time: 0,
                avatar: '',
                nickname: '',
                resume: null,
                form: {
                    mobile: null,
                    code: null
                },
                rules: {
                    mobile: [{required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: checkMobile, trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'},]
                }

            }
        },
        created() {
            const {pause, resume} = useIntervalFn(() => {
                this.time--
                if (this.time < 1) {
                    pause()
                }
            }, 1000, false)
            this.resume = resume

            this.getQQuserInfo()

        },
        methods: {
            getQQuserInfo() {
                if (!QC.Login.check()) {
                    return;
                }
                QC.api('get_user_info').success(res => {
                    console.log(res)
                    this.avatar = res.data.figureurl_1
                    this.nickname = res.data.nickname
                })
            },
            send() {
                if (this.time !== 0) {
                    return
                }
                this.$refs.form.validateField('mobile', async (str) => {
                    if (str.length === 0) {
                        await userQQBindCode(this.form.mobile)
                        this.time = 60
                        this.$message.success('短信发送成功，请注意查收')
                        this.resume()
                    }
                })
            },
            userQQBindLogin() {

                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        const {result} = await userQQBindLogin({
                            unionId: this.unionId,
                            ...this.form
                        })
                        this.$store.commit('user/setUser', result)
                        this.$router.push(this.$store.state.user.redirectUrl)
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .callback-bind {
        width: 320px;
        margin: 0 auto;

        .user-info {
            height: 70px;
            display: flex;
            background: #f2f2f2;
            align-items: center;
            padding: 0 10px;
            margin-bottom: 25px;

            img {
                width: 50px;
                height: 50px;
            }

            p {
                padding-left: 10px;
            }
        }

        .submit {
            width: 320px;
            height: 50px;
            border-radius: 4px;
            background: @xtxColor;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            display: block;
            margin: 0 auto;
        }
    }

</style>